<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../vue.js"></script>
    </head>

    <body>
        <div id="app">
            <button @click="changeBase">修改基本数据类型</button>
            <h1>数据展示:{{msg}},{{num}},{{boolean1}}</h1>
            <hr>
            <button @click="changeArr">修改数组数据类型</button>
            <h1>数据展示:{{person}}</h1>
            <hr>
            <button @click="changeObj">修改对象数据类型</button>
            <h1>数据展示:{{person1}}</h1>
            <hr>
        </div>
        <script>
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: "#app",
                data() {
                    return {
                        msg: "hello",
                        num: 1,
                        boolean1: false,
                        person: ["小王", "大李", "小张", "王中王"],
                        person1: {
                            name: "laowang",
                            age: 18,
                            sex: "男",
                        },
                    };
                },
                methods: {
                    changeBase() {
                        this.msg = "abc";
                        this.num = 10;
                        this.boolean1 = true;
                    },
                    changeArr() {
                        // 1.使用变更原数组的方法修改数据并有响应式
                        this.person.push('起飞')
                        // 2.对数组重新赋值也可以有响应式
                        this.person = this.person.map((item)=>item + 's')
                    },
                    changeObj() {
                        // 1.直接修改
                        this.person1.name = 'lisi'
                        // 2.深浅拷贝后修改（重新赋值）
                        this.person1 = {...this.person1, age: 100}
                        // 3.新增或删除调用vm.$set, Vue.set,vm.$delete, Vue.delete
                        Vue.set(this.person1, 'grade', 100)
                        vm.$delete(this.person1, 'sex')

                    }
                },
            });
        </script>
    </body>
</html>
